<template>
	<div>
    <Breadcrumb :style="{margin: '15px 0',float: 'left'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>积分管理</BreadcrumbItem>
      <BreadcrumbItem>积分配置</BreadcrumbItem>
    </Breadcrumb>
    <Content class="layer-content">
      <Form inline>
        <FormItem>
          <Input style="width: 400px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="searchGet" @submit.native.prevent/>
        </FormItem>
        <FormItem>
					<Select style="width: 150px" placeholder="奖惩类型" clearable @on-change="selectOption">
            <Option :value="0">扣分</Option>
            <Option :value="1">加分</Option>
          </Select>
				</FormItem>
        <FormItem>
					<Select style="width: 150px" placeholder="可用状态" clearable @on-change="selectStatus">
            <Option :value="0">不可用</Option>
            <Option :value="1">可用</Option>
          </Select>
				</FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
          <Button @click="createView" type="warning">新增</Button>
        </FormItem>
      </Form>
      <Table border :columns="columns" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="pageTotal" :init="Init"></HigPager>
    </Content>
    <Modal :footer-hide="true" v-model="showCreate" title="添加积分项" width="70%">
      <Create :callbank="callEvent"></Create>
    </Modal>
    <Modal :footer-hide="true" v-model="showUpdate" title="编辑积分项" width="70%">
      <Update :dataBus="dataVo" :callbank="callEvent"></Update>
    </Modal>
  </div>  
</template>
<script scope>
import Create from './create.vue'
import Update from './update.vue'
export default {
  data () {
    return {
      pageTotal: 0,
      dataGrid:[],
      regionArray: [],
      postRoleArray: [],
      keywords: null,
      showUpdate: false,
      showCreate: false,
      dataVo: {},
      query: {
        pageIndex: 1,
        pageSize: 15,
        orderBy: {
          asc: true,
          fields: ['sort_index','vpo_id']
        }
      },
      columns: [
        {
          title: "积分名称",
          key: "vpoName",
          width: 200
        },
        {
          title: "奖惩类型",
          key: "vpoType",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("Tag",{
                props: {color: params.row.vpoType === 0 ? 'warning' : 'primary'}
              },params.row.vpoTypeText),
            ])
          }
        },
        {
          title: "最小分值",
          key: "minPoints",
          width: 100
        },
        {
          title: "最大分值",
          key: "maxPoints",
          width: 100
        },
        {
          title: "可用状态",
          key: "vpoStatus",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("Tag",params.row.vpoStatusText),
            ])
          }
        },
        {
          title: "积分描述",
          key: "vpoNotes"
        },
        {
          title: "排序",
          key: "sortIndex",
          width: 70
        },
        {
          title: "创建时间",
          key: "postTime",
          width: 150,
          render: (h, params) => {
            return h("div", this.$date(params.row.postTime,'yyyy-MM-dd HH:mm'));
          },
        },
        {
          title: "操作",
          key: "action",
          width: 160,
          render: (h, params) => {
            return h("nav", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginLeft: "10px",
                  },
                  on: {
                    click: () => {
                      this.auth(params.row)
                    },
                  },
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small",
                  },
                  style: {
                    marginLeft: "10px",
                  },
                  on: {
                    click: () => {
                      this.delConfirm(params.row)
                    },
                  },
                },
                "删除"
              )
            ])
          },
        },
      ]
    }
  },
  components: {
    Update,Create
  },
  methods: {
    //授权
    auth(e){
      this.dataVo = e
      this.showUpdate = true
    },
    createView() {
      this.showCreate = true
    },
    callEvent(){
      this.showUpdate = false
      this.showCreate = false
      this.Init()
    },
    //获取列表
    Init(){
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-uc',
        url: '/v1.0/villager/points/option/page',
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            this.pageTotal = res.data.data.count
            this.dataGrid = res.data.data.list
            for(let item of this.dataGrid) {
              item.vpoStatusText = item.vpoStatus === 0 ? '不可用' : '可用'
              item.vpoTypeText = item.vpoType === 0 ? '扣分' : '加分'
            }
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).get()
    },
    delConfirm(item) {
      this.$Modal.confirm({
        title: '温馨提示',
        content: `确定删除<b>${item.vpoName}</b>积分项吗？`,
        onOk: ()=> {
          this.del(item.vpoId)
        }
      })
    },
    del(id) {
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-uc',
        url: '/v1.0/villager/points/option',
        data: {
          pojo: [id]
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success('删除完成'),
            this.Init()
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).delete()
    },
    selectStatus(vpoStatus) {
      if(!this.query.equal) this.query.equal = new Object()
      this.query.equal.vpoStatus = vpoStatus
      this.Init()
    },
    selectOption(vpoType) {
      if(!this.query.equal) this.query.equal = new Object()
      this.query.equal.vpoType = vpoType
      this.Init()
    },
     //搜索
    searchGet() {
      let sqlLike = {
        fields: ["vpo_name","vpo_notes"],
        keyword: this.keywords,
      }
      this.query.sqlLike = sqlLike
      this.query.pageIndex = 1
      this.Init()
    },
    //重置
    reset() {
      delete this.query.sqlLike
      delete this.query.equal
      this.keywords = null
      this.Init()
    },
  },
  created(){
    this.Init()
  }
}
</script>
<style lang="less" scoped>
.imgs {
  width: 80%;
}
</style>